<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2790765_pqm82v7ytg.css">
    <script src="../js/animate.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 1226px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        .nav {
            display: flex;
            line-height: 40px;
            text-align: center;
            position: absolute;
            right: 50px;
            bottom: 20px;
            z-index: 9999;
        }

        .nav li {
            width: 10px;
            height: 10px;
            border: 1px solid #333;
            border-radius: 50%;
            margin: 0 5px;
        }

        .active {
            background-color: #6ff;
            color: #fff;
        }

        .swiper {
            width: 500%;
            height: 460px;
            overflow: hidden;
            position: relative;
        }

        .swiper .swiper-item {
            width: 20%;
            float: left;
        }

        .swiper .swiper-item img {
            width: 100%;
        }

        .wrap .prev,
        .wrap .next {
            width: 50px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: rgba(0, 0, 0, 0.3);
            font-size: 50px;
            color: #fff;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 9999;
            opacity: 0;
            transition: all 0.5s;
        }

        .wrap:hover .prev,
        .wrap:hover .next {
            opacity: 1;
        }

        .wrap .prev {
            left: 10px;
        }

        .wrap .next {
            right: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <i class="prev iconfont icon-left"></i>
        <i class="next iconfont icon-right"></i>
        <ul class="nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="swiper clear">
            <div class="swiper-item"><img src="../images/1.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/2.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/3.jpg" alt=""></div>
            <div class="swiper-item"><img src="../images/4.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/1.webp" alt=""></div>
        </div>
    </div>
</body>
<script>
    var wrap = document.getElementsByClassName("wrap")[0];
    var nav = document.getElementsByClassName("nav")[0];
    var liList = nav.getElementsByTagName("li");  // [li,li,li,li,li,li]

    var swiper = document.getElementsByClassName("swiper")[0];
    var swiperItems = swiper.getElementsByClassName("swiper-item");

    var prev = document.getElementsByClassName("prev")[0];
    var next = document.getElementsByClassName("next")[0];


    var swiperWidth = wrap.clientWidth; //一张图片的宽度


    var index = 0;   //全局变量 记录轮播的下标
    var timer = null;  // 全局变量 记录轮播的编号

    // 页面加载时 启动自动轮播
    autoPlay();


    // 轮播图如何滚动?
    // 1. 四张图片对应四个点(导航)  一一对应
    // 2. 发现 向左滚几张图片的距离 和 下标一一对象
    //    显示第2张图  => 下标1  => 向左滚1张
    //    显示第3张图  => 下标2  => 向左滚2张
    //    显示第4张图  => 下标3  => 向左滚3张


    for (let i = 0; i < liList.length; i++) {  // i=> 0-5
        let li = liList[i];  //获取对应下标的元素
        li.onclick = function () {

            // 点击时记录下标  => 下次从点击位置开始轮播
            index = i;

            move();

        }
    }

    wrap.onmouseenter = function () {
        clearInterval(timer);
    }

    wrap.onmouseleave = function () {
        autoPlay();
    }


    prev.onclick = function () {


        // 左键连点的问题:  左键连续点击 -> 连续执行animate() ->先清除上一次,在启动下个一个计时器 => 导致图片切换过程中 -> 不会触发回调函数 -> 出现 index < 0  => 页面无法滚动?

        // 解决方法: => 对左边的临界值进行判断 => 如果index < 0(期望从第一张 滚动到 第四张)  => 障眼法
        // 


        index--;  // 0 1 2 3  
        console.log(index);

        move();



    }

    next.onclick = function () {


        // 右键连点的问题:  右键连续点击 -> 连续执行animate() ->先清除上一次,在启动下个一个计时器 => 导致图片切换过程中 -> 不会触发回调函数 ->  第四张滚动到第五张,不会切换到第一张!!!!  -> 会继续向后滚 超出第五张 !!!!

        // 临界值判断 => 超出第五张怎么办?    (超出第五张 瞬间切换到第一张  滚动到第二张)

        // 解决:期望超出第五张之后  依旧能进行丝滑的轮播  -> 第五张(看起来和第一张是一样的) -> 障眼法(超出第五张 瞬间切换到第一张  滚动到第二张)


        index++;  // 0 1 2 3  
        // console.log(index);

        move();

    }



    // 问题: 当前窗口切换到 其他窗口之后  页面无法滚动 -> 计时器还在跑 ->  页面切换回来时  下标和之前的不一致 (效果不好看)  
    // 解决方法 =>  窗口失焦(清除自动轮播)  窗口聚焦(开启自动轮播)

    // 移出当前窗口  => 清除计时器
    window.addEventListener("blur", function () {
        console.log("窗口失焦", "清除计时器");
        clearInterval(timer);
    })

    // 移入到当前窗口 开启计时器
    window.addEventListener("focus", function () {
        console.log("窗口聚焦");
        autoPlay();
    })






    // 无缝轮播直接从第四张切换到第一张  => 不好看 => 有没有什么方法让第四张平滑的滚动到第一张?

    // 解决方法: 障眼法
    //  在第四张之后 加一张图片(第五张)同第一张  => 等第四张滚动到第五张之后瞬间切换到第一张(因为第五张和第一张一样,从视觉方面觉得是一张)

    // 如何判断是否是从第四张 滚动 到 第五张?


    function autoPlay() {
        clearInterval(timer);
        // 自动轮播
        timer = setInterval(function () {
            index++;  // 0 1 2 3  
            console.log(index);

            move();
        }, 3000);
    }

    function move() {

        // 临界值判断
        if (index < 0) {  // 超出左边的临界值
            index = swiperItems.length - 1; // 5-1 => 4  (第五张下标)
            swiper.style.left = -(swiperWidth * index) + "px";  //切换到第五张

            index--;
        }

        if (index > swiperItems.length - 1) { // 如果超出第五张 (index > 4) 
            // 瞬间切换到第一张 
            swiper.style.left = 0;
            index = 0;  //第一张下标   

            index++;  // 下标切到第二张 => 后续会执行animate()  滚动到第二张
        }


        for (var j = 0; j < liList.length; j++) {
            liList[j].className = ""; // 清除每一个导航的class名
        }

        // 点的问题:
        //   点(四个):0 1 2 3     
        // 图片(五张):0 1 2 3 4(第五张)    => 第五张图片没有导航对应 liList[4] => undefined

        // 解决方法: 
        // 因为第五张同第一张(障眼法),滚动到第五张时应该将第一张变为活跃状态

        var activeIndex = index >= swiperItems.length - 1 ? 0 : index;
        liList[activeIndex].className = "active";

        animate(swiper, { left: -(swiperWidth * index) }, "slow", function () {
            // 每次滚动结束时 会执行的回调函数
            // console.log("index", index);

            // 每次滚动结束时 判断是否滚动到第五张(下标: 4) 
            if (index >= swiperItems.length - 1) { // index >= 4 (滚动第五张)
                swiper.style.left = 0;
                index = 0;
            }

        })
    }





</script>

</html>